import React, { useEffect, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import "./APP.scss";
import { Button, Space, Avatar, NavBar, List } from "antd-mobile";
import { UnorderedListOutline, PayCircleOutline, SetOutline } from "antd-mobile-icons";
import { useMemo } from "react";
import { connect } from "react-redux";

function My(props) {
    const Navigat = useNavigate();
    const [information, setinformation] = useState(false);
    const [data, setData] = useState({});

    useMemo(() => {
        const information = !!localStorage.getItem("userInfo");
        setinformation(information);
    }, [props]);

    useEffect(() => {
        let data = localStorage.getItem("userInfo");

        try {
            data = JSON.parse(data);

            setData(data.data[0]);
        } catch (err) {
            data = {};
        }
    }, []);

    const logout = useCallback(function () {
        props.logout();
    }, []);

    const user = !!props.user[0];

    const w = () => {
        if (user) {
            Navigat("/bookbox");
        } else {
            alert("请先登录");
        }
    };

    const ww = () => {
        if (user) {
            Navigat("/data");
        } else {
            alert("请先登录");
        }
    };

    return (
        <div
            className="box"
            style={{
                paddingTop: "45px",

                zIndex: "-1",
            }}
        >
            <NavBar
                onBack={() => {
                    window.history.back(-1);
                }}
                className="Navigation"
            ></NavBar>
            <Space block wrap direction="vertical" align="center">
                <Avatar style={{ "--size": "6.25rem" }} className={"avatar"} src={props.user[0]?.url} />

                <span> {user ? props.user[0].username : ""}</span>
                {information ? (
                    <Button color="primary" fill="none" onClick={logout}>
                        退出登录
                    </Button>
                ) : (
                    <Space className="Space">
                        <Button
                            color="primary"
                            onClick={() => {
                                Navigat("/login");
                            }}
                        >
                            登录
                        </Button>
                        <Button
                            color="primary"
                            onClick={() => {
                                Navigat("/reg");
                            }}
                        >
                            注册
                        </Button>
                    </Space>
                )}
            </Space>

            <List className="List">
                <List.Item prefix={<UnorderedListOutline />} onClick={w}>
                    我的书架
                </List.Item>
                <List.Item prefix={<PayCircleOutline />} onClick={ww}>
                    个人资料
                </List.Item>
                <List.Item prefix={<SetOutline />} onClick={() => {}}>
                    设置
                </List.Item>
            </List>
        </div>
    );
}
const mapStateToProps = function (state) {
    console.log("state.userInfo", state.userInfo);
    return {
        user: state.userInfo,
    };
};

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
        logout() {
            dispatch({ type: "logout" });
        },
    };
};
My = connect(mapStateToProps, mapDispatchToProps)(My);
export default My;
